
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhui"></i>
                    <div class="name">优惠</div>
                    <div class="fontclass">.icon-youhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone-line"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-phone-line</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuijianunselected"></i>
                    <div class="name">tuijian_unselected</div>
                    <div class="fontclass">.icon-tuijianunselected</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icotuijian"></i>
                    <div class="name">ico_tuijian</div>
                    <div class="fontclass">.icon-icotuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shape"></i>
                    <div class="name">空</div>
                    <div class="fontclass">.icon-shape</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu1"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianzan"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.icon-dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yue"></i>
                    <div class="name">余额</div>
                    <div class="fontclass">.icon-yue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu2"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vip"></i>
                    <div class="name">vip</div>
                    <div class="fontclass">.icon-vip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanwujilu"></i>
                    <div class="name">暂无记录 </div>
                    <div class="fontclass">.icon-zanwujilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wanyanwendapei"></i>
                    <div class="name">晚宴-问搭配</div>
                    <div class="fontclass">.icon-wanyanwendapei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fahuo"></i>
                    <div class="name">送货</div>
                    <div class="fontclass">.icon-fahuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao_daisonghuo"></i>
                    <div class="name">图标_待送货</div>
                    <div class="fontclass">.icon-tubiao_daisonghuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-bianjidizhi"></i>
                    <div class="name">icon-编辑地址</div>
                    <div class="fontclass">.icon-icon-bianjidizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-baocuo"></i>
                    <div class="name">icon-报错</div>
                    <div class="fontclass">.icon-icon-baocuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-baoxian"></i>
                    <div class="name">icon-保鲜</div>
                    <div class="fontclass">.icon-icon-baoxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-caidan"></i>
                    <div class="name">icon-菜单</div>
                    <div class="fontclass">.icon-icon-caidan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-baiduqianbao"></i>
                    <div class="name">ac-icon</div>
                    <div class="fontclass">.icon-icon-baiduqianbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-chudian"></i>
                    <div class="name">icon-厨电</div>
                    <div class="fontclass">.icon-icon-chudian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dianzanshixin"></i>
                    <div class="name">icon-点赞实心</div>
                    <div class="fontclass">.icon-icon-dianzanshixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dianzankongxin"></i>
                    <div class="name">icon-点赞空心</div>
                    <div class="fontclass">.icon-icon-dianzankongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-chuyong"></i>
                    <div class="name">icon-厨用</div>
                    <div class="fontclass">.icon-icon-chuyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dachushuohua"></i>
                    <div class="name">icon-大厨说话</div>
                    <div class="fontclass">.icon-icon-dachushuohua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dianhua"></i>
                    <div class="name">icon-电话</div>
                    <div class="fontclass">.icon-icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-tiaoliao"></i>
                    <div class="name">icon-调料</div>
                    <div class="fontclass">.icon-icon-tiaoliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-fenxiang"></i>
                    <div class="name">icon-分享</div>
                    <div class="fontclass">.icon-icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dingwei"></i>
                    <div class="name">icon-定位1</div>
                    <div class="fontclass">.icon-icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-guanyuwomen"></i>
                    <div class="name">icon-关于我们</div>
                    <div class="fontclass">.icon-icon-guanyuwomen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-gouwuche"></i>
                    <div class="name">icon-购物车</div>
                    <div class="fontclass">.icon-icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-guanbi"></i>
                    <div class="name">icon-关闭</div>
                    <div class="fontclass">.icon-icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dingwei1"></i>
                    <div class="name">icon-定位2</div>
                    <div class="fontclass">.icon-icon-dingwei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-jiantou"></i>
                    <div class="name">icon-肩头</div>
                    <div class="fontclass">.icon-icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-huahui"></i>
                    <div class="name">icon-花卉</div>
                    <div class="fontclass">.icon-icon-huahui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-ladukongxin"></i>
                    <div class="name">icon-辣度空心</div>
                    <div class="fontclass">.icon-icon-ladukongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-jiushui"></i>
                    <div class="name">icon-酒水</div>
                    <div class="fontclass">.icon-icon-jiushui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-juli"></i>
                    <div class="name">icon-距离</div>
                    <div class="fontclass">.icon-icon-juli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-ladushixin"></i>
                    <div class="name">icon-辣度实心</div>
                    <div class="fontclass">.icon-icon-ladushixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-nandushixin"></i>
                    <div class="name">icon-难度实心</div>
                    <div class="fontclass">.icon-icon-nandushixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-queding"></i>
                    <div class="name">icon-确定</div>
                    <div class="fontclass">.icon-icon-queding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-nandukongxin"></i>
                    <div class="name">icon-难度空心</div>
                    <div class="fontclass">.icon-icon-nandukongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-pinglunzhanshi"></i>
                    <div class="name">icon-评论展示</div>
                    <div class="fontclass">.icon-icon-pinglunzhanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-liangyou"></i>
                    <div class="name">icon-粮油</div>
                    <div class="fontclass">.icon-icon-liangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-mima"></i>
                    <div class="name">icon-密码</div>
                    <div class="fontclass">.icon-icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-roulei"></i>
                    <div class="name">icon-肉类</div>
                    <div class="fontclass">.icon-icon-roulei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shezhi"></i>
                    <div class="name">icon-设置</div>
                    <div class="fontclass">.icon-icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shizhong"></i>
                    <div class="name">icon-时钟</div>
                    <div class="fontclass">.icon-icon-shizhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shouji"></i>
                    <div class="name">icon-手机</div>
                    <div class="fontclass">.icon-icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shouyeicon"></i>
                    <div class="name">icon-首页icon2</div>
                    <div class="fontclass">.icon-icon-shouyeicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shouyeicon1"></i>
                    <div class="name">icon-首页icon1</div>
                    <div class="fontclass">.icon-icon-shouyeicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shouyeicon2"></i>
                    <div class="name">icon-首页icon3</div>
                    <div class="fontclass">.icon-icon-shouyeicon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shouyeicon3"></i>
                    <div class="name">icon-首页icon4</div>
                    <div class="fontclass">.icon-icon-shouyeicon3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-sousuo"></i>
                    <div class="name">icon-搜索</div>
                    <div class="fontclass">.icon-icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-tuijianshangpin"></i>
                    <div class="name">icon-推荐商品</div>
                    <div class="fontclass">.icon-icon-tuijianshangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-weixinzhifu"></i>
                    <div class="name">icon-微信支付</div>
                    <div class="fontclass">.icon-icon-weixinzhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wodedingdan"></i>
                    <div class="name">icon-我的订单</div>
                    <div class="fontclass">.icon-icon-wodedingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-xiangguanshangpin"></i>
                    <div class="name">icon-相关商品</div>
                    <div class="fontclass">.icon-icon-xiangguanshangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shuguo"></i>
                    <div class="name">icon-蔬果</div>
                    <div class="fontclass">.icon-icon-shuguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-xiepinglun"></i>
                    <div class="name">icon-写评论</div>
                    <div class="fontclass">.icon-icon-xiepinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-zhifubao"></i>
                    <div class="name">icon-支付宝</div>
                    <div class="fontclass">.icon-icon-zhifubao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-yingyangchengfen"></i>
                    <div class="name">icon-营养成份</div>
                    <div class="fontclass">.icon-icon-yingyangchengfen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wifi"></i>
                    <div class="name">icon-wifi</div>
                    <div class="fontclass">.icon-icon-wifi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-zhifuchenggong"></i>
                    <div class="name">icon-支付成功</div>
                    <div class="fontclass">.icon-icon-zhifuchenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-jiantoushang"></i>
                    <div class="name">icon-肩头上</div>
                    <div class="fontclass">.icon-icon-jiantoushang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-jiantouxia"></i>
                    <div class="name">icon-肩头下</div>
                    <div class="fontclass">.icon-icon-jiantouxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wugouwuche"></i>
                    <div class="name">icon-无购物车</div>
                    <div class="fontclass">.icon-icon-wugouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wudizhi"></i>
                    <div class="name">icon-无地址</div>
                    <div class="fontclass">.icon-icon-wudizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wuyouhuiquan"></i>
                    <div class="name">icon-无优惠券</div>
                    <div class="fontclass">.icon-icon-wuyouhuiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontuan1"></i>
                    <div class="name">团购</div>
                    <div class="fontclass">.icon-icontuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-tianjia"></i>
                    <div class="name">icon-添加</div>
                    <div class="fontclass">.icon-icon-tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shibai"></i>
                    <div class="name">icon-失败</div>
                    <div class="fontclass">.icon-icon-shibai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-youhuiquan"></i>
                    <div class="name">icon-优惠券</div>
                    <div class="fontclass">.icon-icon-youhuiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-yishixiao"></i>
                    <div class="name">icon-已失效</div>
                    <div class="fontclass">.icon-icon-yishixiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-yishiyong"></i>
                    <div class="name">icon-已使用</div>
                    <div class="fontclass">.icon-icon-yishiyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-yiguoqi"></i>
                    <div class="name">icon-已过期</div>
                    <div class="fontclass">.icon-icon-yiguoqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-bofang"></i>
                    <div class="name">icon-播放</div>
                    <div class="fontclass">.icon-icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-jiarugouwuchechenggong"></i>
                    <div class="name">icon-加入购物车成功</div>
                    <div class="fontclass">.icon-icon-jiarugouwuchechenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-tianjiatupian"></i>
                    <div class="name">icon-添加图片</div>
                    <div class="fontclass">.icon-icon-tianjiatupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-yijianfankui"></i>
                    <div class="name">icon-意见反馈</div>
                    <div class="fontclass">.icon-icon-yijianfankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-dizhiguanli"></i>
                    <div class="name">icon-地址管理</div>
                    <div class="fontclass">.icon-icon-dizhiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-queding1"></i>
                    <div class="name">icon-确定</div>
                    <div class="fontclass">.icon-icon-queding1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wudingdan"></i>
                    <div class="name">icon-无订单</div>
                    <div class="fontclass">.icon-icon-wudingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wupinglun"></i>
                    <div class="name">icon-无评论</div>
                    <div class="fontclass">.icon-icon-wupinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wuerji"></i>
                    <div class="name">icon-无二级</div>
                    <div class="fontclass">.icon-icon-wuerji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-wudanpin"></i>
                    <div class="name">icon-无单品</div>
                    <div class="fontclass">.icon-icon-wudanpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiandao"></i>
                    <div class="name">签到</div>
                    <div class="fontclass">.icon-qiandao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianzan1"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.icon-dianzan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-shijian"></i>
                    <div class="name">icon-shijian</div>
                    <div class="fontclass">.icon-icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-manquan"></i>
                    <div class="name">icon-manquan</div>
                    <div class="fontclass">.icon-icon-manquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhui1"></i>
                    <div class="name">优惠</div>
                    <div class="fontclass">.icon-youhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pause"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-pause</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yue1"></i>
                    <div class="name">钱包</div>
                    <div class="fontclass">.icon-yue1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipinbofang"></i>
                    <div class="name">视频播放</div>
                    <div class="fontclass">.icon-shipinbofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu-copy"></i>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">.icon-kefu-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuezhifu"></i>
                    <div class="name">余额支付</div>
                    <div class="fontclass">.icon-yuezhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuangou"></i>
                    <div class="name">团购</div>
                    <div class="fontclass">.icon-tuangou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantout"></i>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">.icon-jiantout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijiantoub"></i>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">.icon-shijiantoub</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nosearch"></i>
                    <div class="name">20170107aircooking-i</div>
                    <div class="fontclass">.icon-nosearch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-copy"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-yaoqing"></i>
                    <div class="name">icon-邀请</div>
                    <div class="fontclass">.icon-icon-yaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-vip4"></i>
                    <div class="name">icon-vip4</div>
                    <div class="fontclass">.icon-icon-vip4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-vip0"></i>
                    <div class="name">icon-vip0</div>
                    <div class="fontclass">.icon-icon-vip0</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-vip1"></i>
                    <div class="name">icon-vip1</div>
                    <div class="fontclass">.icon-icon-vip1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-vip2"></i>
                    <div class="name">icon-vip2</div>
                    <div class="fontclass">.icon-icon-vip2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-vip3"></i>
                    <div class="name">icon-vip3</div>
                    <div class="fontclass">.icon-icon-vip3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dazhongdianping"></i>
                    <div class="name">大众点评</div>
                    <div class="fontclass">.icon-dazhongdianping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_huati"></i>
                    <div class="name">icon_话题</div>
                    <div class="fontclass">.icon-icon_huati</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_biaoqing"></i>
                    <div class="name">icon_表情</div>
                    <div class="fontclass">.icon-icon_biaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_guanlianshangpin"></i>
                    <div class="name">icon_关联商品</div>
                    <div class="fontclass">.icon-icon_guanlianshangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_fatie"></i>
                    <div class="name">icon_发帖</div>
                    <div class="fontclass">.icon-icon_fatie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_shequ"></i>
                    <div class="name">icon_社区</div>
                    <div class="fontclass">.icon-icon_shequ</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_chuantu"></i>
                    <div class="name">icon_传图</div>
                    <div class="fontclass">.icon-icon_chuantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_shanchu"></i>
                    <div class="name">icon_删除</div>
                    <div class="fontclass">.icon-icon_shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_fatie1"></i>
                    <div class="name">icon_发帖2</div>
                    <div class="fontclass">.icon-icon_fatie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-quan"></i>
                    <div class="name">icon-圈</div>
                    <div class="fontclass">.icon-icon-quan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_bofang-"></i>
                    <div class="name">icon_播放-102</div>
                    <div class="fontclass">.icon-icon_bofang-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_fenxiang-"></i>
                    <div class="name">icon_分享-101</div>
                    <div class="fontclass">.icon-icon_fenxiang-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_chihuoshuo"></i>
                    <div class="name">icon_吃货说</div>
                    <div class="fontclass">.icon-icon_chihuoshuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongjiujiubei"></i>
                    <div class="name">红酒+酒杯</div>
                    <div class="fontclass">.icon-hongjiujiubei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-jiantouback"></i>
                    <div class="name">icon-肩头</div>
                    <div class="fontclass">.icon-icon-jiantouback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-bianjidizhi-copy"></i>
                    <div class="name">icon-编辑地址</div>
                    <div class="fontclass">.icon-icon-bianjidizhi-copy</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
